<template>
	<view class="">
		<view class="listCard" @click="toDetail">
			<view class="top">
				<view class="name" @click.stop="toBuilddingDetail(msg)">
					<image src="@/static/images/index/buildIcon.svg" mode=""></image>
					<view>{{ msg.buildingName }}</view>
					<uni-icons color="#999" size="18" type="arrowright" />
				</view>
				<view class="statusItem">
					<view class="">
						<image class="imgs" :src="statusMap[msg.status.toString()].icon"></image>
					</view>
					<view class="statusTxt" :style="{ color: statusMap[msg.status.toString()].color }">{{
						statusMap[msg.status.toString()].text }} </view>
				</view>

			</view>
			<!-- <view class="tit_lines"></view> -->
			<view style="padding: 0 20rpx;padding-bottom: 20rpx;color: #333;font-size: 16px;font-weight: bold;">
				{{msg.elevatorAddress }}
			</view>

			<view class="middle">
				<view class="middle_L">
					<!-- 统计-> 保养详情 -->
					<tags-component :label="`${msg.typeStatusDesc}：`" :templateNames="msg.templateNames" :displayCount="6" />
				</view>
				<view class="middle_R">
					<view class="nameContent">
						<view v-for="(e, index) in msg.planContentUserVos.slice(0, 2)" :key="index" class="nameArea"
							@click.stop="userClick(e, index)">
							<view class="memberName"
								:style="{ background: (msg.status !== 2 || !e.signUser.isPlanStatus) ? '#b9b9b9' : msg.signUser ? '#0091ff' : '#00c6c0' }">
								{{ e.userName && e.userName.length > 2 ? e.userName.slice(-2) : (e.userName || '') }}
							</view>
							<!-- <view v-if="e.signDesc && e.signDesc.length > 0" class="singnContent">
								<view class="singnDesc tag"
								 v-for="(v,i) in e.signDesc" :key="i"
								>{{v.slice(0,2)}}</view>
								
							</view> -->
							<view v-if="index === 1"><uni-icons :type="e.actState ? 'arrowup' : 'arrowdown'" size="16"
									color="#999;"></uni-icons></view>
						</view>
						<!-- <view><uni-icons type="arrowdown" size="16" color="#999;"></uni-icons></view> -->
					</view>
					<!-- arrowup -->

				</view>

			</view>
			<view class="status">
				<!-- <view class="statusItem">
					<image :src="statusMap[msg.status.toString()].icon"></image>
					<view class="statusTxt" :style="{ color: statusMap[msg.status.toString()].color }">{{ statusMap[msg.status.toString()].text }}</view>
				</view> -->
				<view class="tag  red" style="margin-right: 10rpx;" v-if="msg.overdueName">{{ msg.overdueName }}
				</view>
				<view :class="['tag', msg.timeliness == '及时' ? 'green' : '']" style="background: #fdf1e9;color: #fa6400;"
					v-if="msg.timeliness">{{ msg.timeliness }}
				</view>
				<view class="tag red" style="margin: 0 10rpx;" v-if="msg.deferType === 1 || msg.deferType === 5">
					{{ msg.deferType === 1 ? '已延期' : '特殊延期' }}</view>
				<view class="singnDesc tag" v-if="msg.duration !== null">
					{{ msg.duration }}
				</view>

				<!--  -->
				<view class="scoreCount" v-if="msg.status === 4 && msg.score != null">
					<text style="color: red;">工单评分:{{ msg.score }}</text>
				</view>

			</view>
			<view class="s_tit_lines"></view>
			<view class="bottom">
				<!-- <view class="menber">
					<view class="label">{{ msg.groupNames.join(',').replace(/,/g, '、') }}:</view>	
				<view class="nameContent">	
					<view v-for="(e, index) in msg.planContentUserVos" :key="index" class="nameArea">
					<view class="memberName" :style="{ background: (msg.status !== 2 ||!e.signUser.isPlanStatus)? '#b9b9b9' : msg.signUser ? '#0091ff' : '#00c6c0' }">
								{{ e.userName&&e.userName.length > 2 ? e.userName.slice(-2) : (e.userName||'') }}		
					</view>
					<view v-if="e.signDesc.length" class="singnContent">
						<view class="singnDesc tag"
						 v-for="(v,i) in e.signDesc" :key="i"
						>{{v}}</view>
					</view>
				
						</view>
					</view>
				</view> -->
				<view class="times">
					<view class="time">计划时间: {{ msg.planDate.slice(0, 11) }}</view>
					<view class="time" v-if="msg.status !== 1">开始时间: {{ msg.planBeginTime == null ? '无' : msg.planBeginTime
					}}</view>
					<view class="time" v-if="msg.status == 4">完成时间: {{ msg.planEndTime }}</view>
				</view>
				<!-- 待开始+未逾期 -->
				<view class="scoreCount" v-if="showTurnBtn" @click.stop="handleMore">
					<text>更多操作</text>
				</view>

			</view>

		</view>
		<!-- 更多人员 -->
		<uni-popup ref="logPopup" :mask-click="true" type="bottom" @change="showChange">
			<view class="calendarEdit">
				<view class="edit_bor" @click="$refs.logPopup.close()">
					<view class="down-btn"></view>
				</view>
				<view class="edit_content">
					<view class="executive_tit">执行人员</view>
					<scroll-view scroll-y="true" style="height: 480rpx;">
						<view class="executive"
							:style="{ 'border-bottom': Object.keys(groundUserArr).length <= 1 ? 'none' : '2rpx #eee solid' }"
							v-for="(item, name, i) in groundUserArr" :key="i">
							<view class="executive_gr">{{ name }}</view>
							<view class="executive_user" v-for="(pro, c) in item" :key="c">
								<view class="memberName"
									:style="{ background: (msg.status !== 2 || !pro.isPlanStatus) ? '#b9b9b9' : msg.signUser ? '#0091ff' : '#00c6c0' }">
									{{ pro.userName && pro.userName.length > 2 ? pro.userName.slice(-2) : (pro.userName ||
										'')
									}}
								</view>
								<view>{{ pro.userName }}</view>
								<block v-if="pro.isTakePartIn">
									<view class="signStatus" v-if="pro.signStatus === 2">签到定位异常</view>
									<view class="signStatus" v-if="pro.signOutStatus === 2">签退定位异常</view>
								</block>

							</view>
						</view>
					</scroll-view>

				</view>
				<view class="BA_item_botm">
					<view class="botm" @click="$refs.logPopup.close()">我知道了</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { getGroundCount } from '@/apis/statistic.js';
import { mapState, mapActions } from 'vuex';
import dayjs from 'dayjs';

// 多标签组件
import tagsComponent from '@/components/tagsComponents/index';

export default {
	components: { tagsComponent },
	props: {
		msg: {
			type: Object,
			default: ()=>{
				return {};
			}
		},
		mainPlan:{// 保养月历页面
			type:Number,
			default:''
		}
	},
	data() {
		return {
			statusMap: {
				1: {
					text: '待开始',
					color: '#16BF99',
					icon: '/static/images/index/1.png'
				},
				2: {
					text: '进行中',
					color: '#0091ff',
					icon: '/static/images/index/2.png'
				},
				3: {
					text: '提交任务',
					color: '#F7B500',
					icon: '/static/images/index/3.png'
				},
				5: {
					text: '维保签字',
					color: '#FA6400',
					icon: '/static/images/index/5.png'
				},
				4: {
					text: '已完成',
					color: '#999',
					icon: '/static/images/index/4.png'
				},
				5: {
					text: '维保签字',
					color: '#FA6400',
					icon: '/static/images/index/5.png'
				}
			},
			groundUserArr: []
		};
	},
	computed: {
		...mapState('user', ['userinfo']),

		showTurnBtn() {
			let flag = false;
			if (this.msg.auditType === 1) {// 非年审梯
				// 如果是待处理//非年审梯
				if (this.msg.status === 1 && (!this.msg.timeliness || this.msg.timeliness == '及时')) {
					flag = true;
				}
			} else {
				// 如果是待处理//年审梯
				if (this.msg.status === 1 && (!this.msg.timeliness || this.msg.timeliness == '及时')) {
					flag = true;
					// 年审梯 已延期特殊延期过 不显示更多按钮 
					if (this.msg.planDate) {
						if ((this.msg.deferType === 1 || this.msg.deferType === 5) && new Date(this.msg.planDate.replaceAll('-', '/')).getTime() / 1000 === new Date(dayjs().format('YYYY/MM/DD')).getTime() / 1000) {
							flag = false;
						}
					}
				}
			}

			return flag;
		}

	},
	methods: {
		toBuilddingDetail(item) {
			// console.log(item)s
			// if(this.mainPlan){
			// 	return
			// }
			uni.navigateTo({
				url: '/pageModules/projectInfo/detail?id=' + item.buildingId,
			});
		},
		toDetail() {
			let objs = {
				planId: this.msg.planId,
				elevatorId: this.msg.elevatorId,
				overdue: this.msg.overdueName,
				timeliness: this.msg.timeliness,
				planCheckName: this.msg.templateNames && this.msg.templateNames.join(','),
			};
			this.$emit('toDetail', objs);
		},

		// 获取工单组人员
		initGetGround(planId) {
			return new Promise((resolve, reject) => {
				getGroundCount({ planId }).then(res => {
					console.log('getGroundCount', res);
					if (res.code === 200) {
						this.groundUserArr = res.data || [];
						resolve(res.data);
					}
				});
			});
		},
		userClick(item, index) {
			console.log('userClick', item);
			let msgArr = this.msg.planContentUserVos;
			for (let i = 0; i < msgArr.length; i++) {
				// if(index === i){
				msgArr[i].actState = !msgArr[i].actState;
				// }
			}
			this.$refs.logPopup.open();
			this.$forceUpdate();
			this.initGetGround(item.planId);
		},
		showChange(e) {
			console.log('hsowwww', e);
			if (!e.show) {
				let msgArrs = this.msg.planContentUserVos;
				for (let i = 0; i < msgArrs.length; i++) {
					msgArrs[i].actState = false;
				}
				this.$forceUpdate();
			}
		},
		// 更多操作 年审和非年审跳转
		handleMore() {
			console.log('handleMore', this.msg);
			if (this.msg.planContentUserVos && this.msg.planContentUserVos.length > 0) {
				let result = this.msg.planContentUserVos.some((it) => it.userId === this.userinfo.user_id);
				if (!result) {
					uni.showModal({
						title: '提示',
						content: '你没有权限操作该任务',
						showCancel: false,
						confirmText: '我知道了',
						success: (res) => {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return;
				}
			}

			let arr = ['延期保养', '提前保养'];
			if (this.msg.status === 1 && (!this.msg.timeliness || this.msg.timeliness == '及时')) {// 待开始+未逾期
				if (this.msg.auditType === 2) {// 年审类型
					arr = ['延期保养'];
					if (this.msg.deferType === 5 || this.msg.deferType === 1) {// 被特殊年审延期过后
						arr = ['提前保养'];
					}
				}
				if (this.msg.auditType === 1) {// 非年审类型
					if (this.msg.planDate) {
						if (new Date(this.msg.planDate.replaceAll('-', '/')).getTime() / 1000 <= new Date().getTime() / 1000) {// 小于等于今天任务的日期只显示延期
							arr = ['延期保养'];
						}
					}
				}
				uni.showActionSheet({
					itemList: arr,
					success: async res => {
						let needObj = {
							planId: this.msg.planId,
							buildingAddress: this.msg.buildingName + this.msg.elevatorAddress,
							planCheckName: this.msg.templateNames ? this.msg.templateNames[0] : '',
							planDate: this.msg.planDate,
							auditType: this.msg.auditType
						};
						if (this.msg.auditType === 1) {// 非年审
							let str = '';
							if (res.tapIndex === 0) {// 去延期保养页面
								str = '/pageModules/yearTrial/calendarEdit?needObj=' + JSON.stringify(needObj) + '&nums=' + 1;
							}
							if (res.tapIndex === 1) {// 去提前保养页面 
								str = '/pageModules/yearTrial/calendarEdit?needObj=' + JSON.stringify(needObj) + '&nums=' + 2;
							}
							uni.navigateTo({
								url: str
							});
						}
						if (this.msg.auditType === 2) {// 年审
							if (res.tapIndex == 0 && arr[0] === '延期保养') {
								uni.navigateTo({
									url: '/pageModules/yearTrial/yearDelay?needObj=' + JSON.stringify(needObj)
								});
							}
							if (res.tapIndex == 0 && arr[0] === '提前保养') {
								uni.navigateTo({
									url: '/pageModules/yearTrial/calendarEdit?needObj=' + JSON.stringify(needObj) + '&nums=' + 3
								});
							}
						}
					},
					fail(res) { }
				});
			}
		}
	},
};
</script>

<style lang="scss" scoped>
.listCard {
	width: 710rpx;
	box-sizing: border-box;
	// padding: 24rpx 20rpx;
	background-color: #fff;
	border-radius: 8rpx;
	margin-bottom: 20rpx;
	position: relative;

	.top {
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		padding-bottom: 12rpx;
		margin-bottom: 30rpx;
		padding-top: 24rpx;
		border-bottom: 2rpx #eee solid;

		.name {
			flex: 0 0 500rpx;
			color: #333;
			font-weight: 500;
			font-size: 28rpx;
			display: flex;
			align-items: center;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}

		.statusItem {
			flex: 1;
			display: flex;
			// align-items: center;
			margin-right: 20rpx;
			justify-content: flex-end;

			view:nth-of-type(1) {
				image {
					width: 32rpx;
					height: 32rpx;
					vertical-align: middle;
					margin-bottom: 4rpx;
				}
			}
		}

	}

	.tit_lines {
		position: absolute;
		left: 0;
		right: 0;
		top: 80rpx;
		border-bottom: 2rpx #eee solid;
	}

	.s_tit_lines {
		position: absolute;
		left: 0;
		right: 0;
		border-bottom: 2rpx #eee solid;
	}

	.middle {
		display: flex;
		color: #666;
		font-size: 26rpx;
		margin-bottom: 16rpx;
		padding: 0 20rpx;

		.middle_L {
			flex: 1;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.tags{
				width:80%;
			}
		}

		.middle_R {
			flex: 0 0 72px;
			display: flex;
			align-items: flex-start;
		}
	}

	.status {
		display: flex;
		padding: 0 20rpx;
		padding-bottom: 24rpx;
		// border-bottom: 2rpx solid #eeeeee;
	}

	.tag {
		font-size: 24rpx;
		padding: 0rpx 9rpx;
		font-weight: normal;
		border-radius: 4rpx;
		line-height: 32rpx;
		margin-bottom: 2rpx;
	}

	.red {
		color: #e02020;
		background: #ffe3e3;

	}

	.green {
		color: #63c100;
		background-color: #e2f9ca;

	}

	.singnContent {
		display: flex;
	}

	.singnDesc {
		color: #FA6400;
		background-color: #ffefe3;
		margin-left: 6rpx;
	}

	.bottom {
		padding: 20rpx;
		font-size: 24rpx;
		color: #999;
		display: flex;

		.times {
			flex: 1;

			.time {
				color: #999999;
				font-size: 24rpx;
				padding-bottom: 8rpx;
			}
		}

		.scoreCount {
			flex: 1;
			text-align: right;

			text {
				display: inline-block;
				width: 128rpx;
				height: 36rpx;
				line-height: 36rpx;
				border: 2rpx solid #cccccc;
				border-radius: 4rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
				text-align: center;
			}

		}
	}

	.menber {
		display: flex;
		padding-bottom: 16rpx;
		// align-items: center;
	}

	.nameContent {
		display: flex;
		flex: 1;
		// flex-wrap:wrap;
		justify-content: flex-end;

	}

	.nameArea {
		display: flex;
		align-items: center;
		// margin-top: 14rpx;
		// margin-left: 20rpx
	}

	.label {
		padding-right: 20rpx;
		// background-color: pink;
		display: flex;
		align-items: center;
		margin-top: 14rpx;
		max-width: 400rpx;
	}

}

.memberName {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20rpx;
	width: 48rpx;
	height: 48rpx;
	border-radius: 50%;
	background-color: #0091ff;
	color: #fff;
	margin-right: 12rpx;
}

.calendarEdit {
	background-color: #fff;
	height: 678rpx;
	border-radius: 8rpx 8rpx 0rpx 0rpx;
	position: relative;

	.edit_bor {
		width: 100%;
		padding: 20rpx 0;

		.down-btn {
			width: 64rpx;
			height: 10rpx;
			background: #d8d8d8;
			border-radius: 6rpx;
			margin: 0 auto;
		}
	}

	.edit_content {
		width: 680rpx;
		margin: 0 auto;

		.executive_tit {
			margin-bottom: 20rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #333333;
		}

		.executive {
			display: flex;
			flex-direction: column;
			margin-bottom: 20rpx;
			border-bottom: 2rpx #eee solid;
			padding-bottom: 20rpx;

			.executive_gr {
				margin-bottom: 20rpx;
			}

			.executive_user {
				display: flex;
				margin-bottom: 10rpx;
				align-items: center;

				.signStatus {
					color: #FA6400;
					text-align: center;
					background-color: #ffefe3;
					font-size: 24rpx;
					font-weight: 400;
					margin: 0 10rpx;
					padding: 0 10rpx;
				}
			}
		}
	}
}

.BA_item_botm {
	position: fixed;
	bottom: 0;
	left: 0;
	// z-index: 9;
	height: 98rpx;
	display: flex;
	align-items: center;
	width: 100%;
	background: #fff;

	.botm {
		width: 720rpx;
		margin: 0 auto;
		height: 70rpx;
		background: #0091ff;
		border-radius: 8rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 500;
		color: #ffffff;
	}

	.botms {
		background: #efefef;
	}
}
</style>
